<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function f1(){
            console.log(111);
        }


        /**
         * 当页面加载完成后再执行
         */
        window.onload = function(){
            // 为按钮的点击事件，绑定回调函数
            var hello = document.getElementById('hello');
            hello.onclick = function(event){ // 事件回调函数的参数event，表示事件对象
                console.log(222);
                console.log(event); // 事件对象
                console.log(event.target); // 事件源
                console.log(this); // 事件回调函数中的this，表示事件源
            }

            // 为复选框绑定事件
            var objs = document.getElementsByName("hobby")
            for(var obj of objs){
                    obj.onclick = function(){
                        console.log(this.value);
                    }
            }
        }


    </script>
</head>
<body>
    <!-- 方式1：静态绑定 -->
    <button onclick="f1()">按钮1</button>

    <!-- 方式2：动态绑定 -->
    <button id="hello">按钮2</button>
    <hr>

    爱好：<input type="checkbox" name="hobby" value="eat">吃饭
        <input type="checkbox" name="hobby" value="sleep">睡觉
        <input type="checkbox" name="hobby" value="doudou">打豆豆

</body>
</html>